<template>
    <f7-app :params="f7params">
        <div class="bg" v-if="url == null || url == '' || url == '#'"
             style="height: 100%; width: 100%;">
        </div>
        <!--<div v-if="url == null || url == '' || url == '#'"
            style="height: 100%; width: 100%; background: #000;">
            <div style="width: 100%; text-align: center;">
                <img style="margin-top: 50%; width: 200px; height: 200px" src="./assets/logo_60.jpg" />
            </div>
            <div class="title-div">
                <span class="title">点圈</span>
            </div>
        </div>-->
        <f7-view v-else main :url="url" :name="viewName">
        </f7-view>
    </f7-app>
</template>

<script>
import routes from '@/router';
import store from '@/store';
import tables from '@/utils/db/tables.js';
import Common from '@/utils/Common.js';
import eventBus from '@/utils/eventBus.js';
import request from '@/utils/request.js';

var tableList = tables.list;

export default {
	store: store,
    data() {
        return {
        	viewName: 'main-view',
            f7params: {
                name: 'Framework7',
                theme: 'ios',
                routes: routes,
                dialog: {
                    buttonCancel: '取消',
                    buttonOk: '确定',
                },
                panel: {
                    swipe: 'left',
                }
            },
            url: ''
        }
    },
    created: function() {
        window.currentViewName = this.viewName;
    },
    mounted: function() {
    	window.vm = this;
    	var self = this;
    	window.db.transaction(tx => {
            tableList.forEach(table => {
                let sql = 'CREATE TABLE IF NOT EXISTS ' + table.name + '(tid INTEGER PRIMARY KEY AUTOINCREMENT) ';
                tx.executeSql(sql, [], (tx, rs) => {
                    let sql = 'PRAGMA table_info(' + table.name + ') ';
                    tx.executeSql(sql, [], (tx, rs) => {
                        var columnMap = {};
                        var columns = table.columns;
                        for(var i = 0; i < rs.rows.length; i++) {
                            columnMap[rs.rows.item(i).name] = rs.rows.item(i);
                        }
                        for(var i = 0; i < columns.length; i++) {
                            var column = columns[i];
                            if(columnMap[column.name] == null) {
                                window.db.executeSql('ALTER TABLE ' + table.name + ' ADD COLUMN ' + column.name + ' ' + column.type);
                            }
                        }
                        console.log('finish create table: ' + table.name);
                    });
                });
            });
        }, error => {
            console.error(error);
        });
    	setTimeout(() => {
    		self.url = '/Login/';
    	}, 2000);
    }
}
</script>

<style scoped>
    .title-div {
        text-align: center;
    }
    .title{
        margin-top: 30px;
        font-size: 30px;
        font-weight: bolder;
        font-family: "Segoe UI", Arial, sans-serif;
        color: white;
    }
.bg{
    background: url("./assets/bg.jpg") no-repeat 0px 0px;
    background-size: cover;
    background-attachment: fixed;
}
</style>
